<template>
  <div>
    <v-card>
      <v-card-title>
        <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
        <v-spacer></v-spacer>
        <v-text-field label="输入关键字搜索" v-model="search" append-icon="search" hide-details></v-text-field>
      </v-card-title>
      <v-divider></v-divider>
      <!--含有分页的前端-->
      <v-data-table
        :headers="headers"
        :items="brands"
        :search="search"
        :pagination.sync="pagination"
        :total-items="totalDesserts"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center"><img :src="props.item.image"/></td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="justify-center layout">
            <v-btn color="primary" @click="editBrand(props.item)">编辑</v-btn>
            <v-btn color="warning">删除</v-btn>
          </td>
        </template>
      </v-data-table>
    </v-card>

    <!--弹出框-->
    <v-dialog v-model="dialog" width="500" persistent>
      <v-card>
        <v-toolbar dense dark color="primary">
          <!--窗口的文字的显示-->
          <v-toolbar-title>{{edit?"修改":"新增"}}品牌</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="close">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <v-card-text class="px-5">
          <!--局部组件myBrandFrom-->
          <!--父向子传递属性,需要写在这里-->
          <my-brand-form @close="close" :old-brand="oldBrand" :edit="edit"></my-brand-form>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
  import MyBrandForm from "./MyBrandForm"

  export default {
    name: "MyBrand",
    components: {
      MyBrandForm
    },
    data() {
      return {
        oldBrand: {},//被编辑的品牌数据
        //控制窗口文字的显示
        edit: false,
        dialog: false,
        search: '',
        pagination: {},
        loading: true,
        totalDesserts: 0,
        headers: [
          {text: '编号', value: 'id', align: 'left'},
          {text: '名称', value: 'name', align: "center", sortable: false},
          {text: 'LOGO', value: 'image', align: "center", sortable: false},
          {text: '首字母', value: 'letter', align: "center"},
          {text: '操作', value: 'operation', align: "center", sortable: false}
        ],
        //将brands的数据动态变化就完成了,前端页面的展示.
        brands: []
      }
    },
    created() {
      this.getDataFromServer();
    },
    methods: {
      //修改品牌
      editBrand(oldBrand) {
        //品牌的分类信息丢失(根据品牌的id查询所属分类)
        this.$http.get("/item/category/bid/" + oldBrand.id).then(resp => {
          //原来没有的分类信息
          oldBrand.categories = resp.data;
          //点击编辑按钮控制品牌修改的窗口是否弹出(修改与新增品牌共用同一个窗口)
          this.dialog = true;
          //文字的区分显示
          this.edit = true;

          this.oldBrand = oldBrand
        }).catch(resp => {
          this.$message.error("品牌所属分类获取失败")
        });
      },
      //新增品牌
      addBrand() {
        this.dialog = true;
        this.edit = false;
        this.oldBrand=null;
      },
      close() {
        this.dialog = false;
        this.getDataFromServer()
      },
      //与品牌的查询有关
      getDataFromServer() {
        this.$http.get("/item/brand/page", {
          params: {
            //以下的参数发起请求的时候都会在请求的路径中
            currentPage: this.pagination.page,
            pageSize: this.pagination.rowsPerPage,
            //排序参数
            sortBy: this.pagination.sortBy,
            //排序的形式(降序,升序,不排序)
            desc: this.pagination.descending,
            //搜索
            search: this.search
          }
        }).then(
          resp => {
            //把查询到的品牌数据发送给brands
            this.brands = resp.data.items;
            //加载后将load设置为false
            this.loading = false;
            this.totalDesserts = resp.data.total;
          }
        ).catch(
          resp => {
            console.log("请求失败");
            console.log(resp)
          }
        )
      }
    },
    watch: {
      //此时点击页面的分页效果是没有变化,使用watch监控pagination的变化,重新发起请求
      pagination: {
        deep: true,//开启深度监控,pagination的属性的变化
        handler() {
          //pagination变化的回调函数
          this.getDataFromServer();
        }
      },
      //监控搜索页面的变化
      search: {
        //监控search的变化
        deep: true,
        handler() {
          this.getDataFromServer();
        }
      }
    }
  }

</script>

<style scoped>

</style>
